<template>
  <div class="home">
    <div class="header-box">
      <PageHeader />
    </div>
    <div class="body">
      <div class="search-box">
        <Search />
      </div>
      <div class="main-box">
        <div class="step-box">
          <!-- <StepItem
            v-for="(item, index) in titleArr"
            :key="index"
            :id="index"
            :iconColor="iconColor"
            :bodyColor="bodyColor"
            :active="active"
            :selectItem="selectItem"
            :title="item"
          /> -->
          <el-steps :active="1" simple>
            <el-step
              v-for="(item, index) in titleArr"
              :key="index"
              :title="item"
              icon="iconfont icon-yuanquan"
            ></el-step>
          </el-steps>
        </div>
        <div class="project-box"></div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import PageHeader from "./ui/PageHeader.vue";
import Search from "./ui/Search.vue";
import Steps from "./ui/Steps.vue";
import StepItem from "@/components/StepItem.vue";

export default {
  name: "HomeView",
  components: {
    PageHeader,
    Search,
    Steps,
    StepItem,
  },
  data() {
    return {
      iconColor: "#3766FF",
      bodyColor: "C1D0FF",
      bool: false,
      active: null,
      borderColorArr: [
        "#C1D0FF",
        "#E3D1FF",
        "#F7C5FF",
        "#FFDFC6",
        "#FFEEB0",
        "#C3F4E5",
        "#CAE8FF",
      ],
      iconColorArr: [
        "#3766FF",
        "#7A24FF",
        "#E442FF",
        "#FF7100",
        "#FFC700",
        "#00CF90",
        "#0094FF",
      ],
      titleArr: [
        "已完成",
        "等待验收",
        "联调",
        "研发",
        "产品设计",
        "电气实施",
        "售前调研",
      ],
    };
  },
  methods: {
    selectItem(id) {
      console.log("当前点击项--------->", id);
      this.active = id;
      this.bool = !this.bool;
      this.iconColor = this.iconColorArr[id];
      this.bodyColor = this.borderColorArr[id];
    },
  },
  mounted() {
    this.active = 0;
  },
};
</script>
<style scoped lang="scss">
.home {
  /* border: 1px solid blue; */
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header-box {
    width: 100%;
    height: 20%;
  }
  .body {
    border: 1px solid red;
    height: calc(100% - 20%);
    padding-left: 15%;
    flex: 1;
    overflow: hidden;

    .search-box {
      width: 30%;
      margin-top: 20px;
    }

    .step-box {
      margin-top: 40px;
      border: 1px solid red;
    }

    .main-box {
      /* display: flex; */
    }

    .project-box {
      border: 1px solid green;
      width: 100px;
      height: 100px;
    }
  }
}
</style>
